<template>
  <div id="root">
    <transition name="fade" mode="out-in" appear>
      <keep-alive>
          <router-view v-if="$route.meta.keepAlive" :key="$route.fullPath"></router-view>
      </keep-alive>
    </transition>
    <transition name="fade" mode="out-in" appear>
      <router-view v-if="!$route.meta.keepAlive" :key="$route.fullPath"></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#root {
  width: 100%;
  height: 100%;
}
/* 淡入淡出 */
.fade-enter, .fade-leave-to {
  opacity: 0
}
.fade-leave, .fade-enter-to {
  opacity: 1
}
.fade-enter-active, .fade-leave-active {
  transition: all .2s
}
/* 缩放效果 */
.scale-enter, .scale-leave-to {
  transform: scale(0)
}
.scale-leave, .scale-enter-to {
  transform: scale(1)
}
.scale-enter-active, .scale-leave-active {
  transition: all .2s
}
</style>
